<template>
	<view class="model-item flex flex_center" :class="[type, simple?'simple':'']" @click="modelDetailFn(data.id)">
		<view class="model-pic flex_shrink" :style="{backgroundImage: `url(${data.top_pic})`}"></view>
		<view class="model-body">
			<view class="name">{{data.name}}<iconfont v-if="!simple" class="sex" :icon="data.sex==0?'men':'women'" color="#999" :size="15"></iconfont>
			<image class="like" @click.stop="callCollection" src="@/static/img/aixin.png" v-if="(isCollection)"></image></view>
			<view v-if="!simple" class="ellipsis flex flexHc flexBe">
				<view>
					<text v-if="data.age">{{data.age}}岁</text>
					<text v-if="data.area"><text class="line">|</text>{{data.area}}</text>
					<text v-if="data.score">
						<text class="line">|</text>
						<iconfont class="icon-prefix" icon="collect-filled" :size="16" color="#999"></iconfont>
						<text class="score">{{data.score}}</text>
					</text>
				</view>
				
				<view class="check"  @click.stop v-if="(ismyModel)">
					<u-checkbox
						shape="circle" v-model="data.checked" active-color="#cfb787"></u-checkbox></view>
			</view>
			<view v-if="!simple" class="ellipsis">
				<text v-if="data.height">{{data.height}}</text>
				<!-- 三围：B（breast） W（waist） H（hip） -->
				<text v-if="data.BWH"><text class="line">|</text>{{data.bwh}}</text>
				<text v-if="data.ssize"><text class="line">|</text>{{data.ssize}}</text>
			</view>
			<view class="money ellipsis" :style="{'right': isCollection ? '110upx': '20upx'}">￥{{data.price|money}}<text class="unit">/{{data.unit}}</text></view>
			<view v-if="!simple" class="ellipsis">合作品牌：{{data.brand|joinSplicing('、')}}</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		name:"model-item",
		props: {
			type: { // list-列表模式(左图右信息) card-卡片模式(上图下信息)
				type: String,
				default: 'list'
			},
			data: Object, // 单个模特信息
			simple: { // 是否简单展示信息
				type: Boolean,
				default: false
			},
			isCollection: {
				type: Boolean,
				default: false
			},
			ismyModel: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
			};
		},
		methods: {
			// 模特详情
			modelDetailFn(id) {
				uni.navigateTo({
					url: '/pages/model/modelDetail/modelDetail?item=' + id
				})
			},
			// 取消收藏 
			async callCollection () {
					const res = await this.http.httpRequest('/user/cancelCllection','post',{
						mid:this.data.id,
						uid: this.$store.state.uid
					})
					if (res.data.code == 1) {
						this.$u.toast('取消收藏成功')
						this.$emit('refersh')
					} else {
						this.$u.toast('取消收藏失败')
					}
			}
		}
	}
</script>

<style lang="scss">
.model-item {
	position: relative;
	margin-bottom: 20upx;
	line-height: 40upx;
	color: $uni-text-color-grey;
	font-size: 26upx;
	box-sizing: border-box;
	background: #fff;
	.model-pic{
		width: 200upx;
		height: 200upx;
		margin-right: 20upx;
		border-radius: 4px;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
	}
	.model-body {
		width: calc(100% - 160upx);
	}
	.name {
		margin-bottom: 16upx;
		color: $uni-text-color;
		font-size: 30upx;
		font-weight: 700;
	}
	.sex {
		margin-left: 10upx;
		font-weight: 500;
	}
	.score {
		margin-right: 40upx;
	}
	.money {
		position: absolute;
		top: 10upx;
		right: 20upx;
		// padding-left: 18rpx;
		color: $deep-color;
		font-size: 30upx;
		.unit {
			font-size: 26upx;
		}
	}
	&.list {
		width: 100%;
		padding: 0 20upx;
		border: 0;
	}
	&.simple {
		.model-pic{
			width: 120upx;
			height: 120upx;
			margin-right: 20upx;
			border-radius: 4px 4px 0 0;
		}
		.money {
			position: unset;
			top: unset;
			right: unset;
		}
	}
	&.card {
		flex-wrap: wrap;
		float: left;
		width: 44%;
		margin-left: 4%;
		border: 1px solid #efefef;
		border-radius: 4px;
		.model-body {
			width: 100%;
			padding: 10upx;
		}
		.model-pic{
			width: 100%;
			height: 180upx;
			margin-right: 0;
			border-radius: 4px 4px 0 0;
		}
		.money {
			position: unset;
			top: unset;
			right: 120rpx;
		}
	}
}
.line {
	padding: 0 20upx;
}

.like { 
		top: 12rpx;
		right: 28rpx;
	     position: absolute;
		width: 42rpx;
		height: 42rpx;
	}
</style>
